<template>
	<div class="container">
		<div class="d-flex mt-4">
			<div class="border rounded" style=" width: 200px;">
				<div class="d-flex border-bottom bg-light p-3 justify-content-between">
					<label class="">
						<input v-model="checked_left" class="form-check-input me-1" type="checkbox" value="">
						列表1
					</label>
					<div v-model="count_left">{{count[0]}}/{{lists1.length}}</div>
				</div>
				<div class="hide">
					<p v-for="(list1,index) in lists1" class="p-1">
						<input v-model="list1.checked" :disabled="list1.disabled" class="form-check-input me-1"
							type="checkbox">
						{{list1.label}}
					</p>
				</div>
			</div>
			<button @click="handleRight" :disabled="!count[0]>0" type="button"
				class="my-auto btn btn-primary mx-2 align-middle" style="height:30px">左移</button>
			<button @click="handleLeft" :disabled="!count[1]>0" type="button"
				class="my-auto btn btn-primary mx-2 align-middle" style="height:30px">右移</button>
			<div class="border rounded" style=" width: 200px;">
				<div class="d-flex border-bottom bg-light p-3 justify-content-between">
					<label class="">
						<input v-model="checked_right" class="form-check-input me-1" type="checkbox" value="">
						列表2
					</label>
					<div v-model="count_right">{{count[1]}}/{{lists2.length}}</div>
				</div>
				<div class="hide">
					<p v-for="(list2,index) in lists2" class="p-1">
						<input v-model="list2.checked" :disabled="list2.disabled" class="form-check-input me-1"
							type="checkbox" value="">
						{{list2.label}}
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'change',
		},
		props: {
			value: {
				type: Array,
				default: [],
			},
			data: {
				type: Array,
				default: [{
						key: 1,
						label: '1',
						checked: false,
						disabled: false,
					},
					{
						key: 2,
						label: '2',
						checked: false,
						disabled: false,
					},
				],
			},
		},
		data() {
			return {
				lists1: [],
				lists2: [],
				count: [0, 0],
			}
		},
		computed: {
			checked_left: {
				set(newValue) {
					this.lists1.forEach((list1) => { list1.checked = newValue });
				},
				get() {
					if (this.lists1.length === 0) {
						return false;
					}
					return this.lists1.every((list1) => list1.checked === true);
				}
			},
			count_left: {
				get() {
					this.count[0] = 0;
					this.lists1.forEach((item) => {
						if (item.checked) {
							this.count[0]++;
						}
					});
				}
			},
			checked_right: {
				set(newValue) {
					this.lists2.forEach((list2) => { list2.checked = newValue });
				},
				get() {
					if (this.lists2.length === 0) {
						return false;
					}
					return this.lists2.every((list2) => list2.checked === true);
				}
			},
			count_right: {
				get() {
					this.count[1] = 0;
					this.lists2.forEach((item) => {
						if (item.checked) {
							this.count[1]++;
						}
					});
				}
			},
		},
		methods: {
			handleRight() {
				this.lists1.forEach((item, index) => {
					if (item.checked) {
						this.value.push(item.key);
					}
					this.$emit('change', this.value);
					setTimeout(() => {
						this.handleSort();
					}, 0);
				});
			},
			handleLeft() {
				let newValue = [];
				this.lists2.forEach((item, index) => {
					if (!item.checked || item.disabled) {
						newValue.push(item.key);
					}
					this.$emit('change', newValue);
					setTimeout(() => {
						this.handleSort();
					}, 0);

				});
			},
			handleSort() {
				let left = [];
				let right = [];
				this.value.sort((numA, numB) => {
					return numA - numB;
				});
				right = this.data.filter((item) => {
					return this.value.find((num) => num === item.key)
				});
				this.lists2 = JSON.parse(JSON.stringify(right));
				left = this.data.filter((item) => {
					return !this.value.find((num) => num === item.key)
				});
				this.lists1 = JSON.parse(JSON.stringify(left));
			},
		},
		mounted: function() {
			this.handleSort();
		},
	}
</script>

<style>
	.hide {
		height: 400px;
		overflow: auto;
	}
</style>
